<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问答AI与知识图谱</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: auto;
        }
        input[type="text"], button {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #5cb85c;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #4cae4c;
        }
        .response {
            margin-top: 20px;
            padding: 10px;
            background-color: #f4f4f4;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>问答AI与知识图谱</h2>
        <input type="text" id="questionInput" placeholder="输入你的问题...">
        <button onclick="submitQuestion()">提交问题</button>
        <div id="response" class="response"></div>
    </div>

    <script>
    function submitQuestion() {
        const question = document.getElementById('questionInput').value;
        fetch('/transformation', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `question=${encodeURIComponent(question)}`
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('response').innerHTML = `
                <p>用户原始问题: ${data.question}</p>
                <p>扩展后的问题: ${data.extended_question}</p>
            `;
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
    </script>
</body>
</html>